/**
 * Created by dazq on 16/11/28.
 */
import React, { PropTypes,Component } from 'react';
import Drawer from 'react-native-drawer';
import { DefaultRenderer, Actions,ActionConst } from 'react-native-router-flux';
import {
    Text,
    View,
    StyleSheet,
    ListView,
} from 'react-native';
import Button from 'react-native-button';

const propTypes = {
    navigationState: PropTypes.object,
};

class NavigationDrawer extends React.Component {
    componentDidMount() {
        Actions.refresh({key: 'drawer', ref: this.refs.navigation});
    }

    render() {
        const state = this.props.navigationState;
        const children = state.children;
        return (
            <Drawer
                ref="navigation"
                type="displace"
                onOpen={() => Actions.refresh({ key: state.key, open: true })}
                onClose={() => Actions.refresh({ key: state.key, open: false })}
                content={ <MenuView /> }
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan
                tweenHandler={(ratio) => ({
          main: { opacity: Math.max(0.54, 1 - ratio) },
        })}
            >
                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
            </Drawer>
        );
    }
}

class MenuView extends Component{
    // 初始化模拟数据
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                '首页', '消息中心', '账户信息', '意见反馈', '关于我们'
            ])
        };
    }
    _onPressButton(rowId){
        const drawer = this.context.drawer;
        drawer.close()

        switch (rowId) {
            case '0':{
                Actions.root({key:'IndexComponent',type:'replace'});
            }
                break;
            case '1':{
                Actions.root({key:'LoginPages',type:'replace'});

            }
                break;
        };
    }

    render(){
        return (
            <View style={styles.container}>
                <View style={styles.upStyle}>
                    <Text>press</Text>
                </View>
                <View style={styles.bottomStyle}>
                    <View style={{flex: 1, paddingTop: 22}}>
                        <ListView
                            dataSource={this.state.dataSource}
                            renderRow={(rowData,sectionID,rowID) => (<View style={styles.menuListStyle}><Button  onPress={()=>(this._onPressButton(rowID))} containerStyle={styles.btnContainerStyle} style={styles.btnListStyle}>{rowData}</Button></View>)}
                        />
                    </View>
                </View>
            </View>
        )
    }
}

MenuView.contextTypes = {
    drawer: React.PropTypes.object
}

var styles =StyleSheet.create({
    container: {
        backgroundColor:'white',
        flex:1,
    },
    upStyle:{
        flex:1,
    },
    bottomStyle:{
        flex:3,

    },
    btnContainerStyle:{
        height:40,
    },
    btnListStyle:{
        left:30,
        color:'black',
        textAlign:'left'
    },
    menuListStyle:{

    }
})

NavigationDrawer.propTypes = propTypes;

export default NavigationDrawer;
